<template>
  <div class="app-container">
    <el-form
      class="dialog-form"
      :rules="rules"
      ref="dataForm"
      :model="temp"
      label-position="left"
      label-width="120px"
    >
      <el-form-item label="地区等级" prop="areaLevel">
        <el-input-number v-model="temp.areaLevel" :min="1" :max="10" label="等级"></el-input-number>
      </el-form-item>

      <el-form-item label="地区名称" prop="areaName">
        <el-input v-model="temp.areaName" placeholder="地区名称" style="width:300px;"></el-input>
      </el-form-item>

        <el-form-item label="排序" prop="sortNum">
        <el-input-number v-model="temp.sortNum" :min="1" :max="10" label="排序"></el-input-number>
      </el-form-item>

      <el-form-item label="头像" prop="areaImg">
          <el-upload
            class="avatar-uploader"
            :action="UPLOAD_URL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess('areaImg')"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="temp.areaImg" :src="temp.areaImg|absUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

      <!-- <el-form-item label="是否启用" prop="status">
         <el-checkbox v-model="temp.status">启用</el-checkbox> <span style="padding-left:20px;color:#ccc;">未启用无法登陆后台</span>
      </el-form-item> -->
      <el-form-item label="是否启用" prop="status">
        <el-radio v-model="temp.status" label="1">是</el-radio>
        <el-radio v-model="temp.status" label="0">否</el-radio>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" size="mini" :loading="submiting" @click="submitFormAction">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkList:[],
      container: false,
      checkStatusList: [
        {
          label: "下线",
          value: 0
        },
        {
          label: "上线",
          value: 1
        }
      ],
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 20
      },
      cmsList: [],
      list: [],
      roleList:[],
      temp: {
        headImg:"http:www.baidu.com"
      },
      rules: {
          areaLevel: [
          {
            required: true,
            message: "请输入地区等级",
            trigger: "change"
          }
        ],
        areaName: [
          {
            required: true,
            message: "请选择输入地区名称",
            trigger: "change"
          }
        ],
        sortNum: [
          {
            required: true,
            message: "请输入排序",
            trigger: "change"
          }
        ],
        status: [
          { required: true, message: "确认密码不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.$get('/admin/manager/role/list_all')
      .then(data => {
        this.roleList=data;
      })
  },
  methods: {
    submitFormAction() {
      console.log(this.temp)
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.submiting = true;
          const postData = Object.assign({}, this.temp);
          let url = "/admin/area/add";
          if (this.isEditing) {
            url = "/admin/manager/modify";
          }
          this.$post(url, postData)
            .then(data => {
              this.$$notify("操作成功");
              this.dialogFormVisible = false;
              this.temp = {};
            })
            .finally(err => {
              this.submiting = false;
            });
        }
      });
    }
  }
};
</script>
<style>
.el-table td,
.el-table th {
  padding: 1px 0;
}
.el-table {
  font-size: 12px;
}
.opencolor {
  color: red;
}
.openSearch {
  /* width: 100px; */
  margin-bottom: 10px;
  padding-bottom: 5px;
  /* border-bottom: 1px solid #ccc; */
}
</style>